<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getList, postDel } from '@/apis/apis.js'

const tableData = ref([])

const handleDelete = (row, index) => {
  ElMessageBox.confirm(
    '确认删除？',
    '标题',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const res = await postDel({
        id: String(row.id)
      })
      if (!res.status) {
        ElMessage({ type: 'info', message: res.msg })
      }
      else {
        ElMessage({ type: 'success', message: res.msg })
        tableData.value.splice(index, 1)
      }
    }
    catch (err) {
      ElMessage({ type: 'info', message: '网络异常' })
    }
  })
}

onMounted(async () => {
  try {
    const res = await getList()
    if (!res.status) {
      ElMessage({ type: 'info', message: res.msg })
    }
    else {
      tableData.value = res.data.list
    }
  }
  catch (err) {
    ElMessage({ type: 'info', message: '网络异常' })
  }
})
</script>

<template>
  <el-table border :data="tableData">
    <el-table-column label="ID" width="180" prop="id" />
    <el-table-column label="名称" prop="name" />
    <el-table-column label="邮箱" prop="email" />
    <el-table-column label="备注" prop="remark" />
    <el-table-column label="操作" width="180">
      <template #default="{ row, $index }">
        <el-button type="primary" @click="$router.push(`/home/administrator/edit?id=${row.id}`)">编辑</el-button>
        <el-button @click="handleDelete(row, $index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>
